<template>
  <v-app class="mt-5">
    <v-snackbar v-model="promptMessage" top :timeout="3000" style="position:fixed;top:20px;">
      {{ snackbarInfo }}
      <v-chip dark @click="promptMessage = false" label>关闭</v-chip>
    </v-snackbar>

    <div class="mt-5">
      <v-flex xs12 sm11 md9 lg9 style="margin:0 auto">
        <v-toolbar
          prominent
          :style="{height:'40px',border:'1px solid #EEEEEE'}"
          class="elevation-0"
        >
          <p class="pb-1 font-weight-bold" style="color:#666666">请输入您需要重置登录密码的账户名</p>
        </v-toolbar>
        <v-stepper v-model="e1" class="elevation-0" :style="{border:'1px solid #EEEEEE'}">
          <v-stepper-header
            :style="{'box-shadow':'0 0 0 0','max-width':'1100px'}"
            class="mx-auto mt-4"
          >
            <v-stepper-step
              :complete="e1 > 1"
              step="1"
              color="#71AF65"
              :style="{'text-shadow':'0px 0px 0px #CCCCCC'}"
            >验证身份</v-stepper-step>
            <v-divider class="ml-1 mr-1"></v-divider>
            <v-stepper-step :complete="e1 > 2" step="2" color="#71AF65">重置密码</v-stepper-step>
            <v-divider class="ml-1 mr-1"></v-divider>
            <v-stepper-step step="3" color="#71AF65">重置成功</v-stepper-step>
          </v-stepper-header>
          <v-stepper-items>
            <v-stepper-content step="1">
              <v-card class="my-3" height="200px">
                <v-flex xs11 sm10 md8 lg5 style="margin:0 auto">
                  <v-layout>
                    <v-flex xs2 sm4 md4 lg4 class="position">
                      <span>手机号:</span>
                    </v-flex>
                    <v-flex xs10 sm8 md8 lg8>
                      <input
                        type="text"
                        class="text my-2"
                        v-model="userInfo.phone"
                        placeholder
                        style="background:#fff;margin-left:25px"
                      />
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs2 sm4 md4 lg4 class="position">
                      <span>验证码:</span>
                    </v-flex>
                    <v-flex xs10 sm8 md8 lg8>
                      <v-layout>
                        <input
                          type="text"
                          class="text my-2"
                          v-model="userInfo.vertionCode"
                          placeholder
                          style="background:#fff;margin-left:25px;width:52%"
                        />
                        <v-btn
                          class="ma-2 pa-0"
                          style="border:1px solid #71AF65"
                          color="#71AF65"
                          :disabled="Enable"
                          required
                          @click="VerificationPhone"
                        >{{Verification_Info}}</v-btn>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-card>
              <v-divider></v-divider>
              <v-flex style="text-align:center" class="mt-4 mb-2">
                <v-btn
                  color="#71AF65"
                  @click="verificationCode()"
                  :disabled="!userInfo.phone||!userInfo.vertionCode||userInfo.phone.length!=11||userInfo.vertionCode.length!=6"
                  style="display:inline-block;text-align:center;color:#fff"
                  class="mr-4 elevation-0"
                >下一步</v-btn>
                <v-btn
                  color="#F3F3F3"
                  class="elevation-0"
                  @click="e1 = 2"
                  to="/"
                  :style="{color:'#666666',border:'1px solid #CCCCCC'}"
                >退&nbsp;&nbsp;出</v-btn>
              </v-flex>
            </v-stepper-content>
            <v-stepper-content step="2">
              <v-card class="mb-5">
                <v-flex xs10 sm10 md8 lg5 style="margin:80px auto" class="mt-4">
                  <v-layout>
                    <v-flex xs4 sm4 md4 lg4 class="position">
                      <span>新密码:</span>
                    </v-flex>
                    <v-flex xs8 sm8 md8 lg8>
                      <input
                        type="password"
                        class="text my-2"
                        v-model="ResetInfo.password"
                        placeholder
                        style="background:#fff;margin-left:25px"
                      />
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm4 md4 lg4 class="position">
                      <span>确定密码:</span>
                    </v-flex>
                    <v-flex xs8 sm8 md8 lg8>
                      <input
                        type="password"
                        class="text my-2"
                        v-model="ResetInfo.ConfirmPassword"
                        placeholder
                        style="background:#fff;margin-left:25px"
                      />
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-card>
              <p>
                <v-divider></v-divider>
                <v-flex :style="{'text-align':'center','margin-bottom':'-8px'}" class="mt-4">
                  <v-btn
                    dark
                    color="#71AF65"
                    @click="e1 = 1"
                    style="display:inline-block;text-align:center"
                    class="mr-4 elevation-0"
                  >上一步</v-btn>
                  <v-btn
                    color="#71AF65"
                    @click="ResetPassword()"
                    style="display:inline-block;text-align:center;color:#fff"
                    class="elevation-0"
                    :disabled="ResetInfo.password!=ResetInfo.ConfirmPassword"
                  >下一步</v-btn>
                </v-flex>
              </p>
            </v-stepper-content>
            <v-stepper-content step="3">
              <v-card class="mb-5" height="249px">
                <v-flex class="text-xs-center mt-4">
                  <v-avatar class="mt-4 mb-5">
                    <img width="64px" height="64px" src="../../assets/shape_u147.png" alt="John" />
                  </v-avatar>
                  <p class="mt-3 mb-3 title" style="color:#666666">重置成功</p>
                  <p class="body-2 mt-3" style="color:#999999">
                    你所提交的信息已经审核通过，您可以点击
                    <a
                      href="#"
                      :style="{'text-decoration':'none',color:'#71AF65'}"
                    >这里</a>登录账号。如有问题，请联系审核人员或者拨打客服电话 18083812131 。
                  </p>
                  <p style="color:#ccc">3秒后自动跳转到登录页</p>
                </v-flex>
              </v-card>
              <!-- <v-divider></v-divider>
              <v-flex class="text-xs-center mt-4 mb-2">
                <v-btn dark color="#71AF65" @click="e1 = 1" class="mr-4 elevation-0">完成</v-btn>
              </v-flex>-->
            </v-stepper-content>
          </v-stepper-items>
        </v-stepper>
      </v-flex>
    </div>
  </v-app>
</template>
<script>
import qs from "qs";
export default {
  data: () => ({
    promptMessage: false,
    snackbarInfo: '',
    Enable: false,
    text: null,
    Num: 60,
    Verification_Info: "获取验证码",
    e1: 0,
    Newcode: null,
    //电话号码正则验证
    phoneRules: [
      v => !!v || "手机号不能为空"
      // v => /^1[3|4|5|7|8]\d{9}$/.test(v) || "请查看手机号是否正确"
    ],
    codeRules: [v => !!v || "验证码不能为空"],
    userInfo: {
      phone: null,
      vertionCode: null
    },
    ResetInfo: {
      password: null,
      ConfirmPassword: null,
      SafetyCode: null
    }
  }),
  mounted () { },
  methods: {
    //获取验证码
    VerificationPhone () {
      try {
        if (this.userInfo.phone) {
          this.$axios
            .get(
              `https://yigrow.cn/api/v1/common/sms/code/` + this.userInfo.phone
            )
            .then(res => {
              if (res.data.msg === "success") {
                this.promptMessage = true;
                this.snackbarInfo = "验证码发送成功!";
                this.Enable = true;
                this.countDown();
              } else {
                this.promptMessage = true;
                this.snackbarInfo = res.data.data.err;
              }
            });
        } else {
          this.promptMessage = true;
          this.snackbarInfo = "验证码发送成功!";
        }
      } catch (error) {
        //console.log(error);
      }
    },
    //校验验证码是否正确
    verificationCode () {
      let SafetyCode = {
        mobileNumber: this.userInfo.phone,
        code: this.userInfo.vertionCode
      };
      this.$axios({
        url: `https://yigrow.cn/api/v1/common/sms/safecode/status`,
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(SafetyCode)
      }).then(msg => {
        if (msg.data.msg === "success") {
          this.Newcode = msg.data.data.newCode;
          this.e1 = 2;
        } else {
          this.promptMessage = true;
          this.snackbarInfo = "请检查输入是否正确!";
        }
      });
    },
    //验证码倒计时
    countDown () {
      let temp = setTimeout(this.countDown, 1000);
      this.Num = this.Num - 1;
      this.Verification_Info = this.Num + "秒后再试";
      if (this.Num === 0) {
        // this.verifivationCode = false;
        this.Num = 60;
        this.Enable = false;
        this.Verification_Info = "获取验证码";
        clearTimeout(temp);
      }
    },
    //重置密码
    ResetPassword () {
      let bodyinfo = {
        mobileNumber: this.userInfo.phone,
        newPassword: this.ResetInfo.ConfirmPassword,
        code: this.Newcode
      };
      if (this.ResetInfo.password == this.ResetInfo.ConfirmPassword) {
        this.$axios({
          url: "https://yigrow.cn/api/v2/auth_related/user/password/retrieve",
          method: "put",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          data: qs.stringify(bodyinfo)
        }).then(res => {
          if (res.data.msg === "success" && res.data.status === 1) {
            if (
              res.data.data.matchCount === 1 &&
              res.data.data.updItems === 1
            ) {
              this.promptMessage = true;
              this.snackbarInfo = "密码修改成功!";
              this.e1 = 3;
              setTimeout(() => {
                this.$router.push("/");
              }, 3000);
            } else {
              this.promptMessage = true;
              this.snackbarInfo = "密码修改失败!";
            }
          } else {
            this.promptMessage = true;
            this.snackbarInfo = "密码修改失败!";
          }
        });
      } else {
        this.promptMessage = true;
        this.snackbarInfo = "两次密码输入不一致,请检查后再试!";
      }
    }
  }
};
</script>
<style>
.position {
  color: #424242;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  width: 80%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 6px;
  -moz-appearance: none;
  outline: 0;
  padding: 10px;
  margin: 10px;
}
.text:focus {
  border: 1px solid #4caf50;
}
</style>


